<template>
	<el-main>
		<div style="text-align: center;font-weight: 600;font-size: 16px">
			{{ form.taskName }}
		</div>
		<el-form>
			<div style="margin:20px 0px 20px 0px">
				<div style="display: inline-block">任务类型:{{ form.taskTypeName }}</div>
				<div style="display: inline-block;float: right;">任务级别:
					<el-tag v-if="form.level==0" type="warning">普通</el-tag>
					<el-tag v-else-if="form.level==1" type="success">重要</el-tag>
					<el-tag v-else-if="form.level==2" type="danger">重点</el-tag>
					<el-tag v-else type="info">未知</el-tag>
				</div>
			</div>
			<div style="margin:20px 0px 20px 0px">
				<div style="display: inline-block">开始时间:{{ form.beginTime }}</div>
				<div style="display: inline-block;float: right;">结束时间:{{ form.endTime }}
				</div>
			</div>
			<div style="margin:20px 0px 20px 0px">
				<div style="display: inline-block">任务负责人:{{ form.userName }}</div>
				<div style="display: inline-block;float: right;">任务监督人:{{ form.supervisorUserName }}</div>
			</div>
			<div style="margin:20px 0px 20px 0px">
				任务参与人:{{ form.participantUserName }}
			</div>
			<div style="margin:20px 0px 20px 0px">
				所需工期:{{ form.duration }}
			</div>
			<div v-html="form.content"></div>
			<el-form-item label="相关附件" v-if="form.attachId!=''">
				<attach-menu :attachIds="form.attachId" :roleFlag="form.attachRole" :preview="true"></attach-menu>
			</el-form-item>
			<GanttComponent class="left-container" :readOnly="true" :tasks="tasks"></GanttComponent>
		</el-form>
		<el-divider content-position="center">处理日志</el-divider>
		<el-table :data="taskProcessList" style="width: 100%" class="customer-table">
			<el-table-column prop="content" label="处理结果" :show-overflow-tooltip="true" width="300"></el-table-column>
			<el-table-column prop="pProgress" label="当前进度" width="100">
				<template #default="scope">
					<el-progress :percentage="scope.row.pProgress*100"></el-progress>
				</template>
			</el-table-column>
			<el-table-column prop="completeTime" label="完成时间" width="100" align="center"></el-table-column>
			<el-table-column prop="attachId" label="相关附件" :show-overflow-tooltip="true">
				<template #default="scope">
					<attach-menu :attachIds="scope.row.attachId" :roleFlag="1" :preview="true"></attach-menu>
				</template>
			</el-table-column>
			<el-table-column label="操件" fixed="right" align="right" width="100">
				<template #default="scope">
					<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)" v-if="scope.row.isMe=='1'">
						<template #reference>
							<el-button text type="primary" size="small">删除</el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
	</el-main>
</template>

<script>
import GanttComponent from '@/views/office/task/gantt/ganttView';
import AttachMenu from '@/views/module/attachMenu'

export default {
	emits: ['success', 'closed'],
	components: {
		AttachMenu, GanttComponent
	},
	data() {
		return {
			loading: false,
			taskProcessList: [],
			tasks: {
				data: [],
				links: []
			},
			form: {
				taskId: this.$route.query.taskId,
			},
		}
	},
	mounted() {
		this.getTaskInfo();
		this.getGanttInfoByTaskId();
		this.getTaskProcessInfo();
	},
	methods: {
		async getTaskInfo() {
			let res = await this.$API.office.task.getTaskById.get({taskId: this.form.taskId});
			this.isSaveing = false;
			if (res.code == 200) {
				this.form = res.data
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getGanttInfoByTaskId() {
			var res = await this.$API.office.task.getGanttInfoByTaskId.get({taskId: this.form.taskId});
			if (res.code == 200) {
				this.tasks = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getTaskProcessInfo() {
			var res = await this.$API.office.task.getTaskProcessInfo.get({taskId: this.form.taskId});
			if (res.code == 200) {
				this.taskProcessList = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async table_del(row){
			var res = await this.$API.office.task.deleteTaskProcess.post({processId:row.processId});
			if (res.code == 200) {
				this.getTaskProcessInfo();
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},

	}
}
</script>

<style>
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

.container {
	height: 100vh;
	width: 100%;
}

.left-container {
	overflow: hidden;
	position: relative;
	height: 200px;
}
</style>
